<template>
	<view class="message_list">
		<view class="log_item" v-for="(item, index) in messagesData" :key="index">
			<view :class="item.messageStatus == 0?'log_circle_check':'log_circle'"></view>
			<view class="log_content" @click="goUpdate(item)">
			  <view class="log_text">{{item.messageTitle}}</view>
			  <view class="log_text">{{item.messageContent}}</view>
			  <view class="log_text mdate">{{item.createTime}}</view>
			</view>
		</view>
		<view class="flex center mt20" v-if="messagesData.length == 0">暂无数据</view>
	</view>
</template>

<script>
	import {getMessageList,getMessageRead} from '../../util/api.js'
	export default{
		data(){
			return {
				userInfor: uni.getStorageSync('userInfor'),
				messagesData: []
			}
		},
		onLoad() {
			//获取消息列表接口
			this.messageList();
		},
		methods:{
			messageList(is_show){
				this.messagesData = [];
				uni.showLoading();
				let options = {
					userId: this.userInfor.userId,
				}
				getMessageList(options).then((res) => {
					uni.hideLoading();
					if(res.code == 200){
						this.messagesData = res.rows;
					}else{
						this.$tip.toast(res.msg)
					}
				}).catch((error) => {
				})
			},
			
			goUpdate(item){
				item.messageStatus = 1;
				getMessageRead({messageId:item.messageId}).then((res) => {
					if(res.code == 200){
						uni.$emit('refush');
						uni.navigateTo({
							url:'../detailPage/detailPage?eventItem='+ item.taskId,
						})
					}
				}).catch((error) => {})
			}
		}
	}
</script>

<style lang="scss">
	.message_list{
		background: #fff;
		min-height: 100%;
		.log_item{
		  padding: 36rpx 40rpx;

		}

		.log_circle{
		  width: 36rpx;
		  height: 36rpx;
		  border-radius: 100rpx;
		  background: #b3b3b3;
		  margin-top: 10rpx;
		}
		.log_circle_check{
		  width: 36rpx;
		  height: 36rpx;
		  border-radius: 100rpx;
		  background: #4188F2;
		  margin-top: 10rpx;
		}

		.log_jiao{
		  width: 27.36rpx;
		  height: 22.32rpx;
		  content: "";
		  border-left: 0;
		  border-right: 36rpx solid #E3E3E3;
		  border-top: 10rpx solid transparent;
		  border-bottom: 10rpx solid transparent;
		  margin-left: 8rpx;
		  margin-top: 16rpx;
		}

		.log_content{
		  padding-top: 22rpx;
		  padding-bottom: 24rpx;
		  border: 1px solid #E3E3E3;
		  border-radius: 10rpx;
		  padding: 20rpx;
		  background: white;
		  -moz-box-shadow: 3px 3px 12rpx #B4B4B4; /* 老的 Firefox */
		  box-shadow: 3px 3px 12rpx #B4B4B4;
		  margin-top:20rpx;
		}
		.log_state_bt_checked{
		  width: 123rpx;
		  height: 45rpx;
		  border-radius: 10rpx;
		  background: linear-gradient(to right, #FF876D, #FF675E);
		  font-size: 24rpx;
		  color: white;
		  /*横向垂直居中*/
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.log_state_bt{
		  width: 128rpx;
		  height: 45rpx;
		  border-radius: 10rpx;
		  background: #B8A6A5;
		  font-size: 24rpx;
		  color: white;
		  /*横向垂直居中*/
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.log_content .log_text{
		  font-size: 24rpx;
		  color: #767676;
		  font-weight: bolder;
		  margin-top: 10rpx;
		}
		.log_content .mdate{
		  font-size: 22rpx;
		  color: #9D9D9D;
		  text-align: right;
		}
		.title_card2_checked{
		  margin-top: -2px;
		}
	}
</style>
